{% extends 'base.html' %}
{% block style %}
{{ super() }}
    <style>
    .img-thumbnail{
        width: 100px;
    }
    </style>
{% endblock %}
{% block title %}{{ name }}{% endblock %}
{% block nav %}
    <li class="nav-item active">
        <a href="/match-sina/" class="nav-link">回到{{ name }}</a>
    </li>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <ul class="list-unstyled">
                    {% for item in data %}
                    <li class="media mt-3">
                        <img src="{{ item.images_Url[0] }}" alt="" class="mr-5 img-thumbnail">
                        <div class="media-body">
                            <h3 class="h5 mt-1"><a href="/match-{{ item.id }}/" target="_blank">{{ item.short_name }}</a></h3>
                            <span class="badge badge-primary">{{ item.datetime }}</span>
                            <p><a href="{{ item.url }}" target="_blank">{{ item.id }}</a></p>
                            <p>{{ item.describe }}</p>
                        </div>
                    </li>
                    {% endfor %}
                </ul>

                 <nav aria-label="Page navigation example">
                  <ul class="pagination">
                      {% for page in range(1,sum + 1) %}
                    <li class="page-item {% if page == id %}active{% endif %}"><a class="page-link" href="{% if page == 1 %}/match-sina/{% else %}/match-sina-{{ page }}/{% endif %}">{{ page }}</a></li>
                      {% endfor %}
                  </ul>
                </nav>
            </div>
        </div>
    </div>
{% endblock %}